<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
    <g clip-path="url(#clip0_549_4904)">
      <path
        d="M12.6009 0.666504H15.0544L9.69434 6.87915L16 15.3332H11.0627L7.19566 10.2059L2.77087 15.3332H0.31595L6.04904 8.68804L0 0.666504H5.06262L8.55811 5.35307L12.6009 0.666504ZM11.7399 13.8439H13.0993L4.32392 2.07751H2.86506L11.7399 13.8439Z"
        fill="currentColor" />
    </g>
    <defs>
      <clipPath id="clip0_549_4904">
        <rect width="16" height="16" fill="white" />
      </clipPath>
    </defs>
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#7A7A7A',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #222222;
    }
  }
</style>
